<template>
  <page-view class="page-view">
    <!-- 背景图 -->
    <div class="bg" ref="pageView"></div>

    <PalyListTop :name="$store.state.tracks[index].al.name"></PalyListTop>
    <div class="content">
      <div @click="change" class="content_ct" v-show="!songWords">
        <img ref="gun" src="../assets/image/needle-ab.png" :class="gunClassObj" />
        <img ref="ct" src="../assets/image/ct.png" class="ct" />
        <img ref="pic" :src="tracks[playCurrentIndex].al.picUrl" :class="picClassObj" />
      </div>

      <div class="songWords" @click="change" v-show="songWords">
        <p v-for="(item, i) in geCi" :key="i">{{ item.last }}</p>
      </div>
    </div>
    <div class="process">
      <div class="control">
        <input ref="process_control" type="range" name="" id="" value="0" max="100" min="0" step="1"
          class="process_control" />
      </div>
    </div>

    <div class="bf_icon">
      <div></div>
      <div @click="prev" class="prev">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-diyiyeshouyeshangyishou"></use>
        </svg>
      </div>
      <div @click="play" class="bf_zt">
        <!-- <span v-if="$store.state.audioInfo.isPlay">播放||</span>
        <span v-else>暂停> </span> -->
        <Circle v-model:current-rate="currentRate" :rate="rate" :speed="1" layer-color="#ffffff" color="rgba(0,0,0,0.2)"/>
        <svg
          class="icon"
          aria-hidden="true"
          v-if="!$store.state.audioInfo.isPlay"
        >
          <use xlink:href="#icon-bofang2"></use>
        </svg>
        <svg class="icon" aria-hidden="true" v-else>
          <use xlink:href="#icon-zanting1"></use>
        </svg>

      </div>
      <div @click="next" class="next">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuihouyiyemoyexiayishou"></use>
        </svg>
      </div>
      <div class="volume" @click="showVolume">
        音量控制
        <input type="range" max="100" min="0" value="10" step="1" id="volume" ref="volume" />
      </div>
      <!-- <audio
        
        ref="audio"
        :src="`https://music.163.com/song/media/outer/url?id=${tracks[playCurrentIndex].id}.mp3`"
      ></audio> -->
    </div>
  </page-view>
</template>

<script>
import { Toast, Circle } from "vant";
import { onMounted, onUpdated, reactive, ref, toRefs, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore, mapMutations, mapState } from "vuex";
import PalyListTop from "../components/playListTop.vue";
import Api from "../utils/api";
export default {
  name: "songPlayDetail",
  components: { PalyListTop, Toast, Circle },
  computed: {
    ...mapState(["tracks", "playCurrentIndex"]),
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    let pageView = ref(null);
    let oneSongDetail = reactive({});
    oneSongDetail =
      store.state.tracks[route.query.index_current] ||
      store.state.tracks[store.state.playCurrentIndex];
    console.log(oneSongDetail);
    let index = ref(route.query.index_current || store.state.playCurrentIndex);

    // console.log(oneSongDetail);

    //播放、暂停音乐
    let isPlay = ref(false);
    isPlay.value = store.state.audioInfo.isPlay;

    const play = () => {
      //修改仓库的音乐播放状态

      if (store.state.audioInfo.audio.paused) {
        try {
          store.state.audioInfo.audio.play();
          store.commit("setPlay", true);
        } catch (error) {
          Toast.fail("歌曲暂不支持播放");
        }
      } else {
        store.state.audioInfo.audio.pause();
        store.commit("setPlay", false);
      }
      isPlay.value = store.state.audioInfo.isPlay;
    };

    //添加动画
    let gunClassObj = reactive({
      gun: true,
      addRotate: isPlay,
    });
    let picClassObj = reactive({
      pic: true,
      rotate_all_time: isPlay,
    });

    //点击实现歌词和词条模块的切换
    let songWords = ref(false);
    const change = () => {
      songWords.value = !songWords.value;
    };

    //获取歌词
    const songWordsInfo = reactive({
      lrc: {},
      geCi: [],
    });
    const getSongWords = async (id) => {
      // console.log(store.state.tracks[store.state.playCurrentIndex].id)
      // let id = store.state.tracks[store.state.playCurrentIndex].id
      let results = await Api.songWords.getSongWords(
        store.state.tracks[store.state.playCurrentIndex].id
      );
      console.log(results);
      songWordsInfo.lrc = results.lrc;
      // songWordsInfo = results;
      console.log("当前保存的值：", songWordsInfo);
      //是一个个数组
      let geCi1_atFirst = results.lrc.lyric.split(/\n/gis);
      console.log(geCi1_atFirst);
      geCi1_atFirst.forEach((item, index) => {
        //拿出每一项  :   "[00:00.000] 作词 : 施人诚"
        let objItem = {};
        objItem.min = item.slice(1, 3); //00
        objItem.sec = item.slice(4, 6); //00
        objItem.mill = item.slice(7, 10); //000
        objItem.last = item.slice(12, geCi1_atFirst.length); //作词 : 施人诚
        objItem.time =
          parseInt(objItem.mill) +
          parseInt(parseInt.sec) * 1000 +
          parseInt(parseInt.min) * 60 * 1000;
        songWordsInfo.geCi.push(objItem);
      });
      console.log(songWordsInfo.geCi);
    };

    //上一首、下一首
    const prev = () => {
      // store.state.tracks.length
      console.log(store.state.playCurrentIndex);
      if (store.state.playCurrentIndex == 0) {
        Toast("当前已经为第一首歌！");
      } else {
        store.commit("prev");
        getSongWords();
      }
    };
    const next = () => {
      // store.state.tracks.length
      console.log(store.state.playCurrentIndex);
      if (store.state.playCurrentIndex == store.state.tracks.length) {
        Toast("当前已经为最后首歌！");
      } else {
        store.commit("next");
        getSongWords();
      }
    };

    //进度条
    let process_control = ref(null);

    let currentRate = ref(0);
    let rate = ref(0)
    const text = computed(() => currentRate.value.toFixed(0) + '%');

    //点击展示音量控件
    let volume = ref(null);
    const showVolume = () => {
      if (volume.value.style.display == "none") {
        volume.value.style.display = "block";
      } else {
        volume.value.style.display = "none";
      }
    };

    onMounted(() => {

      console.log(store.state.audioInfo.audio)
      // console.log(route.query.index_current)
      // console.log(pageView.value);
      pageView.value.style.backgroundImage = `url('${oneSongDetail.al.picUrl}')`;
      pageView.value.style.backgroundRepeat = "no-repeat";
      pageView.value.style.backgroundPosition = "center";
      pageView.value.style.backgroundSize = "cover";
      console.log(process_control.value);
      getSongWords();

      //进度条
      process_control.value.onchange = function () {
        console.log("进度条变化了");
        console.log(this.value);
        store.state.audioInfo.audio.currentTime =
          (this.value / 100) * store.state.audioInfo.audio.duration;
      };

      store.state.audioInfo.audio.ontimeupdate = function () {
        process_control.value.value = (this.currentTime / this.duration) * 100;
        rate.value = (this.currentTime / this.duration) * 100;
        currentRate.value = (this.currentTime / this.duration) * 100;
        if (this.currentTime == this.duration) {
          store.commit("next");
        }
      };

      //音量控制
      store.state.audioInfo.audio.volume = 0.1; //仓库的音量也是0.2
      volume.value.onchange = function () {
        store.state.audioInfo.audio.volume = this.value / 100;
      };

      console.log("我是播放状态", store.state.audioInfo.isPlay);
    });
    return {
      onUpdated,
      pageView,
      onMounted,
      oneSongDetail,
      ...toRefs(oneSongDetail),
      index,
      play,
      isPlay,
      gunClassObj,
      picClassObj,
      songWords,
      change,
      getSongWords,
      ...toRefs(songWordsInfo),
      prev,
      next,
      process_control,
      showVolume,
      volume,

      text,
      currentRate,
      rate
    };
  },
};
</script>

<style lang="less" scoped>
@keyframes rotate1 {
  from {
    transform: rotateZ(-33deg);
  }

  to {
    transform: rotateZ(-10deg);
  }
}

@keyframes rotate_all_time {
  from {
    transform: translateX(-50%) rotateZ(3600deg);
  }

  to {
    transform: translateX(-50%) rotateZ(-10deg);
  }
}

.addRotate {
  animation: rotate1 1s ease-in-out forwards;
}

.rotate_all_time {
  animation: rotate_all_time 300s linear infinite;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(30px);
  z-index: -1;
}

.content {
  width: 100%;
  height: 416px;

  // background-color: orange;
  .content_ct {
    width: 70%;
    margin: auto;
    height: 100%;
    // background-color: skyblue;
    position: relative;

    .gun {
      position: absolute;
      top: -80px;
      left: 22%;
      /* transform: translateX(-50%); */
      width: 56%;
      z-index: 100;
      transform: rotateZ(-33deg);
    }

    .ct {
      position: absolute;
      width: 100%;
      top: 78px;
      left: 50%;
      transform: translateX(-50%);
    }

    .pic {
      position: absolute;
      width: 64%;
      top: 125px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
    }
  }

  .songWords {
    width: 70%;
    margin: auto;
    height: 100%;
    overflow: auto;
    // background-color: purple;
    text-align: center;
  }
}

.process {
  margin-top: 30px;
  width: 100%;
  height: 20px;

  // background-color: red;
  .control {
    width: 100%;

    .process_control {
      width: 100%;
      height: 3px;
    }
  }
}

.bf_icon {
  width: 100%;
  height: 80px;
  // background-color: yellow;
  display: flex;

  &>div {
    width: 20%;
    // border: 1px solid black;
    height: 100%;
    line-height: 80px;
    text-align: center;
  }

  .bf_zt {
    position: relative;

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 35px;
      height: 35px;
    }

    ::v-deep .van-circle{
      width: 80%;
      height: 100%;
    }
  }

  .prev {
    position: relative;

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .next {
    position: relative;

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .volume {
    position: relative;

    #volume {
      position: absolute;
      width: 32px;
      top: -137%;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      -webkit-appearance: slider-vertical;
    }
  }
}
</style>